<template>
  <div>
    <div v-if="!config.disabled">
      <el-radio-group
        :disabled="config.disabled"
        v-model="obj.type"
        @change="onRadioChange"
      >
        <el-radio label="1">中信码</el-radio>
        <el-radio label="2">机构信用码</el-radio>
      </el-radio-group>

      <el-input
        v-if="obj.type"
        :disabled="config.disabled"
        type="text"
        size="large"
        @input="onInputChange"
        v-model="obj.code"
        :placeholder="`请填写${obj.type * 1 === 1 ? '中信码' : '机构信用码'}`"
      />
    </div>
    <div v-else>
      <span v-if="obj.type * 1 === 1">中信码</span>
      <span v-else-if="obj.type * 1 === 2">机构信用码</span>
      <span class="ml-lg">{{ obj.code }}</span>
    </div>
  </div>
</template>
<script setup>
import { computed } from "vue";
import { deepClone } from "@/utils/index.js";
import { useTrigger } from "@/hooks/useValidatorRules.js";
const emits = defineEmits(["update:modelValue"]);
const { emitTrigger } = useTrigger();
const props = defineProps({
  modelValue: {
    type: Object,
    default: {},
  },
  config: {
    type: Object,
    default: {},
  },
});
const obj = computed({
  get: () => {
    return props.modelValue;
  },
  set: (file) => {
    emits("update:modelValue", file);
    emitTrigger();
  },
});

const onRadioChange = (data) => {
  const form = deepClone(obj.value);
  form.type = data;
  form.code = "";
  obj.value = form;
};
const onInputChange = (data) => {
  const form = deepClone(obj.value);
  form.code = data;
  obj.value = form;
};
</script>